<#include "layout/layout.ftl"/>
<@html page_title="登录" page_tab="login">
    <div class="login-layout">
        <div class="main-container">
            <div class="main-content">
                <div class="row">
                    <div class="col-sm-6" style="margin: 0 auto;">
                        <div class="login-container" style="width: 375px;height: 618px;">
                            <div class="center">
                                <h1>
                                    <i class="glyphicon glyphicon-send green"></i>
                                    <span class="red"><i>Lanan</i></span>
                                    <span class="black" id="id-text2">墨<i class="yellow">辩</i></span>
                                </h1>
                                <h4 class="blue" id="id-company-text">&copy; LanAnTree</h4>
                            </div>

                            <div class="space-6"></div>

                            <div class="position-relative">
                                <div id="login-box" class="login-box visible widget-box no-border" style="background-color:rgb(221, 221, 216);">
                                    <div class="widget-body ">
                                        <div class="widget-main bgc-img">
                                            <h4 class="header dark lighter bigger">
                                                <i class="glyphicon glyphicon-log-in green"></i>
                                                <span class="blue">Please Enter Your Information</span>
                                            </h4>

                                            <div class="space-6"></div>

                                            <form>
                                                <fieldset>
                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="text" class="form-control" placeholder="Username" name="username"/>
                                                                <i class="ace-icon fa fa-user"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="password" class="form-control" placeholder="Password" name="password"/>
                                                                <i class="ace-icon fa fa-lock"></i>
                                                            </span>
                                                    </label>

                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="login_captcha" name="captcha" placeholder="验证码"/>
                                                            <span class="input-group-append">
                                                                <img style="border: 1px solid #ccc;" src="" class="captcha" id="changeCaptcha"/>
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <div class="space"></div>

                                                    <div class="clearfix">
                                                        <label class="inline">
                                                            <input type="checkbox" class="ace" name="rememberMe"/>
                                                            <span class="lbl blue"> Remember Me</span>
                                                        </label>

                                                        <button type="button" id="btn" class="width-35 pull-right btn btn-sm btn-primary" style="background-color: #428BCA!important;border-color: #428BCA;">
                                                            <i class="ace-icon fa fa-key"></i>
                                                            <span class="bigger-110">Login</span>
                                                        </button>
                                                    </div>

                                                    <div class="space-4"></div>
                                                </fieldset>
                                            </form>

                                            <div class="social-or-login center">
                                                <span class="bigger-110">Or Login Using</span>
                                            </div>

                                            <div class="space-6"></div>

                                            <div class="social-login center">
                                                <a class="btn btn-primary" id="qq_login" style="border-radius: 100%;margin: 0 1px;border-width: 0;background-color: #428BCA!important;border-color: #428BCA;">
                                                    <i class="ace-icon fa fa-qq"></i>
                                                </a>

                                                <a class="btn btn-info" id="phone_login" style="border-radius: 100%;margin: 0 1px;border-width: 0;background-color: #6FB3E0!important;border-color: #6FB3E0;">
                                                    <i class="ace-icon fa fa-phone-square"></i>
                                                </a>

                                                <a class="btn btn-danger" id="email_login" style="border-radius: 100%;margin: 0 1px;border-width: 0;background-color: #D15B47!important;border-color: #D15B47;">
                                                    <i class="ace-icon fa fa-envelope"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <div class="toolbar clearfix">
                                            <div>
                                                <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                                    <i class="ace-icon fa fa-arrow-left"></i>
                                                    I forgot my password
                                                </a>
                                            </div>

                                            <div>
                                                <a href="#" data-target="#signup-box" class="user-signup-link">
                                                    I want to register
                                                    <i class="ace-icon fa fa-arrow-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="forgot-box" class="forgot-box widget-box no-border" style="background-color:rgb(221, 221, 216);">
                                    <div class="widget-body">
                                        <div class="widget-main bgc-img">
                                            <h4 class="header red lighter bigger">
                                                <i class="ace-icon fa fa-key"></i>
                                                Retrieve Password
                                            </h4>

                                            <div class="space-6"></div>
                                            <p  class="red" style="font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;">
                                                Please enter your new password
                                            </p>

                                            <form>
                                                <fieldset>
                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="email" class="form-control" placeholder="Email" name="email" autocomplete="off"/>
                                                                <i class="ace-icon fa fa-envelope"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="password" class="form-control" placeholder="newPassword" name="newPassword"/>
                                                                <i class="ace-icon fa fa-lock"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="password" class="form-control" placeholder="Enter the password again" name="againPassword"/>
                                                                <i class="ace-icon fa fa-reorder"></i>
                                                            </span>
                                                    </label>

                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="reset_captcha" name="captcha" placeholder="验证码"/>
                                                            <span class="input-group-append">
                                                                <img style="border: 1px solid #ccc;" src="" class="captcha" id="changeCaptcha"/>
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <label for="email_captcha"></label>
                                                            <input type="text" class="form-control" id="email_captcha" name="captcha" placeholder="验证码"/>
                                                            <div class="clearfix">
                                                                <button type="button" id="send_email" class="pull-left btn btn-sm btn-danger" style="font-size: 12px;border-width: 4px;background-color: #D15B47!important;border-color: #D15B47;">
                                                                    <span class="bigger-110" style="font-size: 13px;line-height: 1.38;">获取邮箱验证码</span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="clearfix">
                                                        <button type="button" id="forgot_btn" class="width-35 pull-right btn btn-sm btn-danger" style="font-size: 12px;border-width: 4px;background-color: #D15B47!important;border-color: #D15B47;">
                                                            <i class="ace-icon fa fa-lightbulb-o"></i>
                                                            <span class="bigger-110" style="font-size: 13px;line-height: 1.38;">Send Me!</span>
                                                        </button>
                                                    </div>
                                                </fieldset>
                                            </form>
                                        </div>

                                        <div class="toolbar center">
                                            <a href="#" data-target="#login-box" class="back-to-login-link">
                                                Back to login
                                                <i class="ace-icon fa fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div id="signup-box" class="signup-box widget-box no-border" style="background-color:rgb(221, 221, 216);">
                                    <div class="widget-body">
                                        <div class="widget-main bgc-img">
                                            <h4 class="header green lighter bigger">
                                                <i class="ace-icon fa fa-users blue"></i>
                                                <span>New User Registration</span>
                                            </h4>

                                            <div class="space-6"></div>
                                            <p> Enter your details to begin: </p>

                                            <form>
                                                <fieldset>
                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="text" class="form-control" placeholder="Email" name="email1" value="" autocomplete="off"/>
                                                                <i class="ace-icon fa fa-envelope"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="text" class="form-control" placeholder="Username" name="username1" value=""/>
                                                                <i class="ace-icon fa fa-user"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="password" class="form-control" placeholder="Password" name="password1" value=""/>
                                                                <i class="ace-icon fa fa-lock"></i>
                                                            </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                            <span class="block input-icon input-icon-right">
                                                                <input type="password" class="form-control" placeholder="Repeat password" name="rePassword" value=""/>
                                                                <i class="ace-icon fa fa-retweet"></i>
                                                            </span>
                                                    </label>

                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="signup_captcha" name="captcha" placeholder="验证码"/>
                                                            <span class="input-group-append">
                                                                <img style="border: 1px solid #ccc;" src="" class="captcha" id="changeCaptcha"/>
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <label class="block">
                                                        <input type="checkbox" class="ace" id="agreement" name="agreement"/>
                                                        <span class="lbl green">
                                                                I accept the
                                                                <a href="#">User Agreement</a>
                                                            </span>
                                                    </label>

                                                    <div class="space-24"></div>

                                                    <div class="clearfix">
                                                        <button type="reset" class="width-30 pull-left btn btn-sm" style="background-color: #ABBAC3!important;border-color: #ABBAC3!important;">
                                                            <i class="ace-icon fa fa-refresh"></i>
                                                            <span class="bigger-110">Reset</span>
                                                        </button>

                                                        <button type="button" id="register_btn" class="width-65 pull-right btn btn-sm btn-success" style="background-color: #28a745 !important;border-color: #28a745 !important;">
                                                            <span class="bigger-110">Register</span>

                                                            <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                        </button>
                                                    </div>
                                                </fieldset>
                                            </form>
                                        </div>

                                        <div class="toolbar center">
                                            <a href="#" data-target="#login-box" class="back-to-login-link" id="back">
                                                <i class="ace-icon fa fa-arrow-left"></i>
                                                Back to login
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            if('ontouchstart' in document.documentElement) document.write("<script src='../../../static/theme/default/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
        </script>

        <!-- inline scripts related to this page -->
        <script type="text/javascript">

            //click event
            jQuery(function($) {
                let username_flag = false;
                let password_flag = false;
                let rePassword_flag = false;
                let email_flag = false;
                let agreement_flag = false;

                //重置flag状态
                function flag(){
                    username_flag = false;
                    password_flag = false;
                    rePassword_flag = false;
                    email_flag = false;
                    agreement_flag = false;
                }

                //update captcha
                function changeCaptcha(){
                    $(".captcha").each(function () {
                        let date = new Date();
                        $(this).attr("src", "/common/captcha?ver=" + date.getTime());
                    });
                }

                $(".captcha").attr('src', "/common/captcha?ver=" + new Date().getTime());
                $(".captcha").click(function () {
                    changeCaptcha();
                });

                $(document).on('mousedown', '.toolbar a[data-target]', function(e) {
                    e.preventDefault();
                    let target = $(this).data('target');
                    $('.widget-box.visible').removeClass('visible');//hide others
                    $(target).addClass('visible');//show target
                    $("input").val("");//清空input内容
                    flag();//重置flag状态
                    changeCaptcha(); //update captcha
                });

                //检验用户名
                $("input[name='username']").on('change',function(e){
                    username_flag = use($("input[name='username']"), e);
                })

                //检验用户名
                $("input[name='username1']").on('change',function(e){
                    username_flag = use($("input[name='username1']"), e);
                })

                //检验密码
                $("input[name='password1']").on('change',function(e){
                    password_flag = pwd($("input[name='password1']"), e);
                })

                //检验密码
                $("input[name='password']").on('change',function(e){
                    password_flag = pwd($("input[name='password']"), e);
                })

                //校验重复密码
                $("input[name='rePassword']").on('change',function(e){
                    rePassword_flag = rPwd($("input[name='password1']"), $("input[name='rePassword']"), e);
                })

                //检验密码
                $("input[name='newPassword']").on('change',function(e){
                    password_flag = pwd($("input[name='newPassword']"), e);
                })

                //校验重复密码
                $("input[name='againPassword']").on('change',function(e){
                    rePassword_flag = rPwd($("input[name='newPassword']"), $("input[name='againPassword']"), e);
                })

                //检验邮件
                $("input[name='email']").on('change',function(e){
                    email_flag = clickEmail($("input[name='email']"), e);
                })

                //检验邮件
                $("input[name='email1']").on('change',function(e){
                    email_flag = clickEmail($("input[name='email1']"), e);
                })

                //login
                $("#btn").on('mousedown',function(e){
                    if(password_flag && username_flag){
                        req("post", "/api/login", {
                            username:  $.trim($("input[name='username']").val()),
                            password: $.trim($("input[name='password']").val()),
                            captcha: $.trim($("#login_captcha").val()),
                        }, function (data) {
                            if (data.code === 200) {
                                suc("登录成功");
                                flag();
                                setTimeout(function () {
                                    window.location.href = "/";
                                }, 700);
                            } else {
                                err(data.description);
                            }
                        });
                    }else{
                        err("用户名或密码错误！");
                    }
                });

                //register
                $("#register_btn").on('mousedown',function(e){
                    agreement_flag = $('#agreement').prop('checked');
                    if(password_flag && username_flag && email_flag && rePassword_flag && agreement_flag){
                        req("post", "/api/register", {
                            username: $.trim($("input[name='username1']").val()),
                            password: $.trim($("input[name='password1']").val()),
                            email: $.trim($("input[name='email1']").val()),
                            captcha: $.trim($("#signup_captcha").val())
                        }, function (data) {
                            if (data.code === 200) {
                                suc("注册成功");
                                setTimeout(function () {
                                    window.location.href = "/";
                                }, 700);
                            } else {
                                err(data.description);
                            }
                        });
                    }else{
                        if (!agreement_flag){
                            err("请同意协议");
                        } else {
                            err("请检查格式");
                        }
                    }
                });

                //send_email
                $("#send_email").on('mousedown',function(e){
                    let emailNum = $.trim($("input[name='email']").val());
                    if(email_flag){
                        let index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                        req("post", "/api/userCenter/sendEmail", {
                            email: emailNum,
                            captcha: $.trim($("#reset_captcha").val())
                        }, function (data) {
                            if (data.code === 200) {
                                layer.close(index);
                                suc("验证码发送成功，请前往邮箱查收！邮箱账户：" + emailNum);
                            } else {
                                layer.close(index);
                                err(data.description);
                            }
                        });
                    }else{
                        err("用户名或密码错误！");
                    }
                });

                //forgot
                $("#forgot_btn").on('mousedown',function(e){
                    let newPassword = $.trim($("input[name='newPassword']").val());
                    let email = $.trim($("input[name='email']").val());
                    let resetCaptcha = $.trim($("#email_captcha").val());
                    if(password_flag && rePassword_flag && resetCaptcha !== '' && resetCaptcha !== null){
                        let index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                        req("post", "/api/forget_password", {
                            email: email,
                            password: newPassword,
                            captcha: resetCaptcha,
                        }, function (data) {
                            if (data.code === 200) {
                                layer.close(index);
                                setTimeout(function () {
                                    window.location.href = "/login.ftl";
                                }, 700);
                            } else {
                                layer.close(index);
                                err(data.description);
                            }
                        });
                    }else{
                        err("请检查格式");
                    }
                });

                // other login

                // qq
                $("#qq_login").on('mousedown', function (e) {

                });

                // phone
                $("#phone_login").on('mousedown', function (e) {
                    layer.closeAll();
                    layer.open({
                        type: 2,
                        title: '手机号码登录',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1000px', '600px'],
                        content: '/static/public.resources/html/phoneLogin.html'
                    });
                });

                // email
                $("#email_login").on('mousedown', function (e) {
                    layer.closeAll();
                    let index = layer.open({
                        type: 2,
                        title: '邮箱登录',
                        shadeClose: true,
                        shade: false,
                        scrollbar: false,
                        maxmin: true,
                        area: ['1000px', '600px'],
                        content: '/static/public.resources/html/emailLogin.html',
                    });
                });
            })
        </script>
    </div>
</@html>
